<script >
import { el } from "element-plus/es/locales.mjs";
import Nav from "../components/navigation_stu.vue";
import Tit from "../components/title.vue";
import axios from "axios";
import { ElMessage } from 'element-plus'



export default {
  name: "CourseList",
  components: {
    Tit,
    Nav
  },
  data() {
    return {
      Cno: '',
      throw_coin:' ',
      description:{
        c_no: '',
        c_name: '',
        c_credit: '',
        c_teacher: '',
        c_time: '',
        c_place: '',
        c_limit: '',
        c_selected: '',
        leftcoin:''
      }
    }
  },
  methods: {
    async search() {
      try {
        const token = localStorage.getItem('token');
        const userNo = sessionStorage.getItem('UserNo');
        if (!token || !userNo) {
          alert('缺少必要的认证信息，请重新登录。');
          await this.$router.push({name:"Login"})
          return;
        }
        const response = await axios.post(`${import.meta.env.VITE_API_BASE_URL}/student/searchCourse`, {
          c_no: String(this.Cno)
        }, {
          headers: {
            token: token,
            'Content-Type': 'application/json'
          },
        });
        console.log(response.data.code)
        if (response.data.code === '200') {
          ElMessage({
            message: '查询成功',
            type: 'success',
          })
          console.log(response.data.data.course)
          console.log(response.data.data)
          this.description.c_no = response.data.data.course.c_no;
          this.description.c_name = response.data.data.course.c_name;
          this.description.c_credit = response.data.data.course.c_credit;
          this.description.c_teacher = response.data.data.course.t_name;
          this.description.c_time = response.data.data.course.c_time;
          this.description.c_place = response.data.data.course.c_address;
          this.description.c_limit= response.data.data.course.c_count;
          this.description.c_selected = response.data.data.selectcoursesize;
          this.description.leftcoin=response.data.data.leftcoin;
        } else {
          ElMessage({
            message: '查询出错，请检查是否选定了时间和类型',
            type: 'error',
          })
          
        }
      } catch (error) {
        console.error('查询失败', error);
        alert('查询出错，请稍后再试');
      }
    },
    async submit() {
      try {
        const token = localStorage.getItem('token');
        const userNo = sessionStorage.getItem('UserNo');
        if (!token || !userNo) {
          alert('缺少必要的认证信息，请重新登录。');
          await this.$router.push({name:"Login"})
          return;
        }
        const response = await axios.post(`${import.meta.env.VITE_API_BASE_URL}/student/confirmCourse`, null,{
          // method: 'POST',
          headers: {
            token: token,
            // 'Content-Type': 'application/json'
          },
          params:{
            c_no: this.Cno,
            coins: parseInt(this.throw_coin)
          }
        });
        console.log(response.data.code)
        if (response.data.code === '200') {
          ElMessage({
            message: '选课提交成功',
            type: 'success',
          })

        } else {
          alert('提交出错');
        }
      } catch (error) {
        console.error('提交失败', error);
        alert('提交出错，请稍后再试');
      }
    },
  },
  mounted() {
    document.title = '学生信息管理系统';
    const token = localStorage.getItem('token'); // 确保 token 已正确存储
    const userNo = sessionStorage.getItem('UserNo'); // 确保 UserNo 已正确存储
    if (!token || !userNo) {
      alert('缺少必要的认证信息，请重新登录。');
      this.$router.push({ name: "Login" });
    }
  },
}
</script>

<template>
  <text class="sub-title"> — 提交选课申请</text>
  <Tit></Tit>
  <Nav></Nav>
  <el-container style="position: fixed;top: 120px;left: 500px;">
    <el-container>
      <el-text>请输入课程号:</el-text>
      <el-input v-model="Cno" style="padding-left: 10px; width: 120px" placeholder="" />
      <el-button plain @click="search" style="margin-left: 50px">
        检索课程
      </el-button>
      <el-button plain @click="submit" style="margin-left: 30px">
        提交选课
      </el-button>
    </el-container>
    <el-form class="check" label-width="80px" label-position="left" style="position:fixed; top:350px; width:1250px; left:450px;">
      <el-row :gutter="10">
        <el-col :span="8">
          <el-form-item label="课程号">
            <el-input v-model="description.c_no" disabled style="width: 180px" />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="课程名">
            <el-input v-model="description.c_name" disabled style="width: 180px" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="10">
        <el-col :span="8">
          <el-form-item label="学分">
            <el-input v-model="description.c_credit" disabled style="width: 180px" />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="授课教师">
            <el-input v-model="description.c_teacher" disabled style="width: 180px" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="10">
        <el-col :span="8">
          <el-form-item label="上课时间">
            <el-input v-model="description.c_time" disabled style="width: 180px" />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="上课地点">
            <el-input v-model="description.c_place" disabled style="width: 180px" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="10">
        <el-col :span="8">
          <el-form-item label="限选/已选">
            <el-input :value="`${description.c_limit}/${description.c_selected}`" disabled style="width: 180px" />
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <div class="white-rectangle"></div>
  </el-container>
  <el-text class="left_coin">你所剩的选课币: {{description.leftcoin}}</el-text>
  <el-container class="throw_coin">
    <el-text>对该课程投入选课币数:</el-text>
    <el-input v-model="throw_coin" style="padding-left: 10px; width: 120px" placeholder="" />
  </el-container>
</template>

<style scoped>
.sub-title {
  z-index: 2;
  position: fixed;
  top: 35px;
  left: 380px;
  color: #0e4bbd;
  font-size: 30px;
  font-weight: normal;
}
.check {
  position: fixed;
  top: 300px;
  width: 1250px;
  left: 300px;
}
.left_coin {
  position: fixed;
  top: 180px;
  left: 500px;
}
.throw_coin {
  position: fixed;
  top: 220px;
  left: 500px;
}
.white-rectangle {
  position: fixed;
  top: 300px; /* 调整这个值以确保矩形位于 check 类图层下面 */
  left: 20%;
  width: 60%;
  opacity: 0.9;
  height: 300px; /* 根据需要调整高度 */
  background-color: #f6f6f8;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  z-index: -1; /* 确保矩形在其他元素下面 */
  border-radius: 15px;
}
</style>
